<template>
  <div id="wageitem">
    <el-row class="th">
      <el-col v-for="item in ths" :key="item.id" :span="item.span" :offset="item.offset">{{ item.name }}</el-col>
    </el-row>
    <el-collapse v-model="active">
      <el-collapse-item v-for="list in lists.filter(item => item.isVisible)" :key="list.id" :name="list.name">
        <template slot="title">
          <span class="title">
            {{ list.name }}
            <i v-if="list.isCustom" @click.stop="onClickTitle(list)" class="el-icon-edit" style="padding-left:10px"></i>
          </span>
        </template>
        <template v-for="child in list.columnList">
          <el-row :key="`${child.id}-${child.name}`" v-if="child.isVisible">
            <el-col v-for="item in ths" :key="`${child.id}-${item.id}`" :span="item.span" :offset="item.offset">
              <template v-if="item.key == 'beforeAfterTax'">
                {{ child[item.key] }}
              </template>
              <template v-else-if="item.key == 'salaryColumnVisible'">
                <el-switch v-model="child[item.key]" :disabled="!child['isCustom']" active-color="#4ac474"></el-switch>
              </template>
              <template v-else-if="item.key == 'isCustom'">
                <span class="edit" @click="onEdit(list, child)" v-if="!list.isNoShow || judgeEdit(list.name)"> 编辑 </span>
              </template>
              <template v-else-if="item.key === 'formulaSummary'">
                <span v-if="child.salaryRule == 6">{{ child.formulaShow }}</span>
                <span v-else>{{ child[item.key] }}</span>
              </template>
              <template v-else> {{ child[item.key] }} </template>
            </el-col>
          </el-row>
        </template>
        <el-row>
          <span class="addItem" @click="onAddItem" v-if="!list.isNoEdit">+ 添加项目</span>
        </el-row>
      </el-collapse-item>
    </el-collapse>
    <span class="addGroup" @click="onAddItem">+ 添加分组</span>
    <add-item ref="addItem" :is-pop.sync="isAddPop" :lists.sync="lists" @submit="onSubmit" :is-add.sync="isAdd"></add-item>
    <add-item-pop :is-pop.sync="isItemPop" :group.sync="nowList" :row.sync="nowRow" @affirm="onAffirm"></add-item-pop>
    <add-group-pop :is-pop.sync="isGroupPop" :group.sync="nowList" @affirm="onGroupAffirm"></add-group-pop>
  </div>
</template>
<script>
import { diffArr } from "@/util/xc/utils";
import { handleTemplateVisible, noEditPartial } from "../../utils";
import addItem from "./addItem.vue";
import AddGroupPop from "./addGroupPop.vue";
import AddItemPop from "./addItemPop.vue";
export default {
  components: { addItem, AddItemPop, AddGroupPop },
  name: "wageItem",
  data() {
    return {
      ths: [
        { id: 1, name: "工资项", span: 4, key: "name" },
        { id: 2, name: "计薪规则", span: 9, key: "formulaSummary" },
        { id: 3, name: "税前税后项", span: 4, offset: 1, key: "beforeAfterTax" },
        { id: 4, name: "工资单是否可见", span: 4, key: "salaryColumnVisible" },
        { id: 5, name: "操作", span: 2, key: "isCustom" }
      ],
      active: "",
      lists: [],
      isAddPop: false,
      isItemPop: false,
      isGroupPop: false,
      nowRow: "",
      nowList: "",
      isAdd: true
    };
  },
  provide() {
    return {
      getLists: arr => this.lists.filter(item => arr.includes(item.name))
    };
  },
  methods: {
    // 判断相关
    ...{
      judgeEdit(name) {
        return noEditPartial.includes(name);
      }
    },
    // 分组相关
    ...{
      onGroupAffirm(e) {
        const { data } = e;
        console.log(data);
        Object.keys(data).forEach(key => {
          this.nowList[key] = data[key];
        });
      },
      onAddGroup() {
        this.nowList = "";
        this.isGroupPop = true;
      },
      onClickTitle(list) {
        if (list.isCustom) {
          this.nowList = list;
          this.isGroupPop = true;
        }
      }
    },
    // 小项相关
    ...{
      onEdit(list, row) {
        this.nowList = list;
        this.nowRow = row;
        this.isItemPop = true;
      },
      onAddItem() {
        this.nowList = "";
        this.isAddPop = true;
      },
      onSubmit(e) {
        console.log(e);
        this.lists = e;
        this.active = this.lists.map(item => item.name);
      },
      onAffirm(e) {
        const { data } = e;
        console.log(e);
        Object.keys(data).forEach(key => {
          this.nowRow[key] = data[key];
        });
      }
    },
    // 获取组件数据
    ...{
      getData() {
        let itemList = [];
        const columnList = this.lists
          .filter(item => item.isVisible)
          .map(item => {
            // 大项
            const { id = 0, name, namePy, isCustom, customAddReduce, isYf, isSf, salaryTId = 0 } = item;
            itemList.push({ id, name, namePy, isCustom, customAddReduce, isYf, isSf, salaryTId });
            return item.columnList
              .filter(item => item.isVisible)
              .map(column => {
                // 小项
                const { id = 0, name, namePy, salaryRule, formulaSummary, formulaShow, formulaDetail, beforeAfterTax, salaryColumnVisible, isCustom, holidayTypeId, salaryTId = 0 } = column;
                const formula = {
                  formulaSummary,
                  formulaShow,
                  formulaDetail
                };
                return {
                  id,
                  salaryItemId: item.id,
                  name,
                  namePy,
                  salaryRule,
                  ...formula,
                  beforeAfterTax,
                  salaryColumnVisible,
                  isCustom,
                  holidayTypeId,
                  salaryTId
                };
              });
          })
          .flat(2);
        return { itemList, columnList };
      },

      /** 数据对比 */
      dataDiff(now = this.lists, old = this.oldLists) {
        return diffArr(now, old);
      }
    },
    async initData() {
      const { data } = await this.$api.smartSalary.salaryTenantPublicTemplate().then(res => res.data);
      this.lists = data;
      this.isAdd = true;
      this.setActive();
    },

    /** 数据回填 */
    dataBackFill(data) {
      const { itemList, columnList } = data;
      this.lists = itemList.map(item => ({ ...item, columnList: columnList.filter(col => col.salaryItemId == item.id) }));
      this.setActive(true);
      this.isAdd = false;
    },

    /** 设置展开项 */
    setActive(bol = false) {
      this.lists = handleTemplateVisible(this.lists, bol);
      this.oldLists = JSON.parse(JSON.stringify(this.lists));
      this.active = this.lists.map(item => item.name);
      // 清空listArr 否则工资项模板不卸载不会调用公共数据
      this.$refs.addItem.listArr = [];
    }
  }
};
</script>
<style lang="less" scoped>
@height: 30px;

.clickSpan() {
  cursor: pointer;
  color: #5c91fb;
  display: inline-block;
  font-size: 12px;
}
#wageitem {
  overflow: auto;
  height: 100%;
  .th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: #f5f8fd;
    height: @height;
    line-height: @height;
  }
  .addItem,
  .addGroup {
    margin: 20px 0;
    .clickSpan();
  }
  :deep( .el-collapse) {
    .title {
      position: relative;
      display: flex;
      align-items: center;
      align-content: center;
      padding-left: 10px;
      font-weight: bold;
      &::before {
        content: "";
        position: absolute;
        background: #628cfd;
        width: 3px;
        height: 14px;
        margin-top: -2px;
        left: 0;
      }
    }
    .el-collapse-item {
      overflow: auto;
      .el-collapse-item__wrap {
        border-bottom: none;
        .el-collapse-item__content {
          padding-bottom: 0;
        }
      }
      .el-row {
        border-top: 1px solid #ecebf1;
        min-height: @height;
        display: flex;
        align-items: center;
        .el-col {
          line-height: @height;
          .edit {
            .clickSpan();
          }
        }
        .el-button {
          margin-top: 10px;
        }
      }
    }
  }
}
</style>
